<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #triangle-up {
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 100px solid red;
        }
        #div1{

            /*height: 100px;*/
            /*border-style: solid;*/
            /*border-width: 100px 100px 100px 100px;*/
            /*border-color: red forestgreen blue cyan;*/
            /*width: 100px;*/
        }
        a{
            display: block;
            width: 300px;
            height: 300px;
        }
        .haorooms-small {
            background-size: cover;
            width: 300px;
            height: 300px;
            background-color: red;
            /*-webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
            clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);*/
            clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
        }
        .test{
            background-size: cover;
            width: 300px;
            height: 300px;
            background-color: red;
            /*-webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
            clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);*/
            clip-path: polygon(0% 0%, 100% 100%, 100% 100%);
        }
    </style>
</head>

<body>
<div class="haorooms-small" >
    <a href="http://www.baidu.com">fdsaf</a>
</div>
<!--<div class="haorooms-small" style="background-image: url('http://sandbox.runjs.cn/uploads/rs/216/0y89gzo2/idtga8h3.png');">

</div>-->
<div class = "test">

</div>


</body>
</html>